<template>
  <a-drawer
    :width="900"
    placement="right"
    :closable="false"
    @close="close"
    :visible="visible"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <div class="row">
          <h1 class="title">退货申请单： {{ this.model.id }}</h1>
          <h1 class="title">&emsp;&emsp;&emsp;申请状态： {{ this.model.status_dictText }}</h1>
        </div>
        <detail-list>
          <detail-list-item term="退货类型">{{ this.model.returnType_dictText ? this.model.returnType_dictText : "-" }}</detail-list-item>
          <detail-list-item term="货品状态">{{ this.model.productStatus_dictText ? this.model.productStatus_dictText : "-" }}</detail-list-item>
          <detail-list-item term="钱款状态">{{ this.model.moneyStatus_dictText ? this.model.moneyStatus_dictText : "-" }}</detail-list-item>
        </detail-list>

        <a-table
          style="margin-bottom: 10px"
          rowKey="id"
          bordered
          :scroll="{ x: 800 }"
          :columns="omsOrderReturnItemTable.columns"
          :pagination="false"
          :dataSource="omsOrderReturnItemTable.dataSource">

        </a-table>

        <a-card :bordered="true">
          <detail-list title="申请信息">
            <detail-list-item term="订单编号">{{ this.model.orderId }}</detail-list-item>
            <detail-list-item term="用户账号">{{ this.model.memberId }}</detail-list-item>
            <detail-list-item term="退货类型">{{ this.model.returnType_dictText ? this.model.returnType_dictText : "-"  }}</detail-list-item>
            <detail-list-item term="申请时间">{{ this.model.createTime }}</detail-list-item>
            <detail-list-item term="联系人">  {{ this.model.returnName ? this.model.returnName : "-"   }}</detail-list-item>
            <detail-list-item term="联系电话">{{ this.model.returnPhone ? this.model.returnPhone : "-" }}</detail-list-item>
            <detail-list-item term="退货原因">{{ this.model.reason ? this.model.reason : "-"  }}</detail-list-item>
            <detail-list-item term="单号申请次数">{{ this.model.returnApplyIndex ? this.model.returnApplyIndex : "-"  }}</detail-list-item>
            <detail-list-item term="退货的系统">{{ this.model.sourceSystem_dictText ? this.model.sourceSystem_dictText : "-" }}</detail-list-item>
            <detail-list-item term="问题描述">{{ this.model.description ? this.model.description : "-"  }}</detail-list-item>
            <detail-list-item term="凭证图片">{{ this.model.proofPics ? this.model.proofPics : "-"  }}</detail-list-item>
          </detail-list>

          <a-divider style="margin-bottom: 24px"/>
          <detail-list title="退款信息">

            <detail-list-item term="扣除费用">{{ this.model.deductAmount ? this.model.deductAmount : "-" }}</detail-list-item>
            <detail-list-item term="扣除原因">{{ this.model.deductReason ? this.model.deductReason : "-" }}</detail-list-item>

            <detail-list-item term="退款金额">{{ this.model.returnAmount ? this.model.returnAmount : "-" }}</detail-list-item>
            <detail-list-item term="快速退款">{{ this.model.fastReturnType ? this.model.fastReturnType : "-" }}</detail-list-item>


          </detail-list>

        </a-card>
      </a-form>
    </a-spin>

  </a-drawer>
</template>

<script>

  import moment from 'moment'
  import pick from 'lodash.pick'
  import { getAction } from '@/api/manage'
  import { httpAction } from '@/api/manage'
  import DetailList from '@/components/tools/DetailList'
  import ATextarea from 'ant-design-vue/es/input/TextArea'
  const DetailListItem = DetailList.Item

  export default {
    name: 'StmOrderReturnApplyModal',
    components: {
      ATextarea,
      DetailList,
      DetailListItem
    },
    data() {
      return {
        title:"门店退货申请明细",
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },

        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules:{
        },
        // 退货明细
        omsOrderReturnItemTable: {
          loading: false,
          dataSource: [],
          columns: [
            {
              title: '商品货号',
              key: 'productSn',
              dataIndex: 'productSn'
            },
            {
              title: '商品名称',
              key: 'productName',
              dataIndex: 'productName'
            },
            {
              title: '退货数量',
              key: 'productCount',
              dataIndex: 'productCount'
            },
            {
              title: '商品单价',
              key: 'productPrice',
              dataIndex: 'productPrice'
            },
            {
              title: '商品实际支付单价',
              key: 'productRealPrice',
              dataIndex: 'productRealPrice'
            },
            {
              title: '商品条码',
              key: 'productSkuCode',
              dataIndex: 'productSkuCode'
            },
            {
              title: '商品类型',
              key: 'orderProductType_dictText',
              dataIndex: 'orderProductType_dictText'
            }
          ]
        },
        url: {
          queryById: "/stm/omsCompanyAddress/queryById",
          omsOrderReturnItem: {
            list: '/stm/omsOrderReturnApply/queryOmsOrderReturnItemByMainId'
          },
        }
      }
    },
    created () {
    },
    methods: {
      onDeductAmountChange(value) {
        if(value>=0){
          this.model.returnAmount = this.model.returnAmount + this.model.deductAmount - value;
          this.model.deductAmount = value;
        }
        console.log('changed', value);
      },
      add () {
        this.edit({});
      },
      edit (record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;

        console.log((!(this.model.status===1 && (this.model.productStatus!==0 && this.model.productStatus!==4 && this.model.productStatus!==5))));


        if(this.model.returnAmount === null || this.model.returnAmount === "" || this.model.returnAmount === undefined)
          this.model.returnAmount = 0;

        if(this.model.deductAmount === null || this.model.deductAmount === "" || this.model.deductAmount === undefined)
          this.model.deductAmount = 0;


        if(this.model.companyAddressId === null || this.model.companyAddressId === "" || this.model.companyAddressId === undefined)
          this.model.companyAddressId = '';
        else
          this.model.companyAddressId = this.model.companyAddressId.toString();

        this.$nextTick(() => {
          //this.form.setFieldsValue(pick(this.model,'companyAddressId','handleNote', 'deductAmount', 'deductReason'))
          //时间格式化
          //this.form.setFieldsValue({handleTime:this.model.handleTime?moment(this.model.handleTime):null})
          //this.form.setFieldsValue({receiveTime:this.model.receiveTime?moment(this.model.receiveTime):null})
        });

        if (this.model.id) {
          console.log(this.model.id);
          let params = { id: this.model.id }
          this.requestSubTableData(this.url.omsOrderReturnItem.list, params, this.omsOrderReturnItemTable)
        }

      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      requestSubTableData(url, params, tab) {
        tab.loading = true
        getAction(url, params).then(res => {
          tab.dataSource = res.result || []
        }).finally(() => {
          tab.loading = false
        })
      },

    }
  }
</script>

<style scoped>
  .title {
    color: rgba(0,0,0,.85);
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
  }
  .row {
    display: flex;
    width: 100%;
  }
  .ant-btn {
    margin-left: 30px;
    margin-bottom: 30px;
    float: right;
  }

</style>